<template>
    <div class="prj-edit-member-view">

      <el-button size="medium" type="text" icon="el-icon-edit" @click="addClick">
        添加成员
      </el-button>

      <el-table
        size="medium"
        :data="members"
        border
        style="width: 100%">
        <el-table-column
          align="center"
          prop="member_name"
          label="姓名">
        </el-table-column>
        <el-table-column
          align="center"
          prop="department_name"
          label="所属部门">
        </el-table-column>
        <el-table-column
          align="center"
          prop="project_roles"
          label="项目角色职责">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
<!--            <el-button size="medium" type="text" icon="el-icon-delete" @click="editClick(scope.$index)">-->
<!--              编辑-->
<!--            </el-button>-->
<!--            <el-button size="medium" type="text" v-if="scope.row.member_id != datas.project_person_in_charge_id" @click="changeClick(scope.$index)">-->
<!--              职责更换-->
<!--            </el-button>-->
            <el-button class="text-btn-red" size="medium" type="text" v-if="scope.row.member_id != datas.project_person_in_charge_id" @click="deleteClick(scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        v-if="dialogVisible"
        title="添加成员"
        :visible.sync="dialogVisible"
        width="850px"
        :before-close="handleClose">

        <el-form ref="ruleForm" :model="data" :rules="rules" class="demo-form-inline" label-width="120px" size="medium" label-position="left">

<!--          <el-form-item label="所属部门" prop="department_id">-->
<!--            <el-select v-model="data.department_id" @change="departmentChange">-->
<!--              <el-option-->
<!--                v-for="item in departments"-->
<!--                :key="item.id"-->
<!--                :label="item.department_name"-->
<!--                :value="item.id">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->

<!--          <el-form-item label="成员姓名" prop="member_id">-->
<!--            <el-select v-model="data.member_id" @change="nameChange">-->
<!--              <el-option-->
<!--                v-for="item in peoples"-->
<!--                :key="item.id"-->
<!--                :label="item.user_name"-->
<!--                :value="item.id">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->

          <el-form-item label="项目角色职责" prop="project_roles_id">
<!--            <el-select v-model="data.project_roles_id" placeholder="请选择项目角色职责" @change="rolesChange">-->
<!--              <el-option-->
<!--                v-for="item in roles"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->

            <span>{{data.project_roles}}</span>
          </el-form-item>

          <el-form-item label="项目成员" required>
            <tree-transfer v-model="data.selectMembers" :people="members"></tree-transfer>
<!--            <el-tree-->
<!--              :props="props"-->
<!--              :load="loadNode"-->
<!--              @check-change="handleCheckChange"-->
<!--              lazy-->
<!--              show-checkbox>-->
<!--            </el-tree>-->
          </el-form-item>


        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="documentConfirm">确 定</el-button>
        </span>
      </el-dialog>

    </div>
</template>

<script>
  import treeTransfer from "./treeTransfer";
    export default {
        name: "members",
        components:{treeTransfer},
        props:{
            datas:{},
            members:Array
        },
        data:function () {
            return{
                memberData:[],
                dialogVisible:false,
                data:{},
                peoples:[],
                departments:[],
                roles:[
                    {
                        value:'1',
                        label:'组长'
                    },
                    {
                        value:'2',
                        label:'项目成员'
                    }
                ],
                rules: {
                    member_id: [
                        { required: true, message: '请选择成员', trigger: 'change' }
                    ],
                    department_id: [
                        { required: true, message: '请选择所属部门', trigger: 'change' }
                    ],
                    project_roles_id: [
                        { required: true, message: '请选择角色职责', trigger: 'change' }
                    ],
                },
                editIndex:-1,

                props: {
                    label: 'name',
                    children: 'zones',
                    isLeaf: 'leaf'
                },
                selectMembers:[]
            }
        },
        mounted:function(){
            this.departments = this.$store.getters.department
            this.departments.forEach(item=>{
                item.name = item.department_name
                item.disabled = true;
            })
        },
        methods:{
            onChange(){

            },
            handleCheckChange(data, checked, indeterminate) {
                if (checked && data.department){
                    this.data.selectMembers.push(data)
                }else if (data.department){
                    let index = this.data.selectMembers.findIndex(a=>a.id == data.id)
                    if (index != -1){
                        this.data.selectMembers.splice(index,1)
                    }
                }
                console.log(this.data.selectMembers);

            },
            loadNode(node, resolve) {
                if (node.level === 0) {
                    return resolve(this.departments);
                }
                if (node.level > 1) return resolve([]);

                let d = {
                    department_id:node.data.id,
                    limit:1000,
                    skip:1,
                    user_status:1,
                }
                this.$api.GET_USER_LIST(d).then(res=>{
                    if (res.code == 200){
                        let list = res.data.data || [];
                        if (list.length){
                            node.data.disabled = false
                            list.forEach(item=>{
                                item.name = item.user_name
                                item.leaf = true;
                            })
                        }
                        resolve(list);
                    }
                })
            },
            getDepartment:function(){

            },
            onChange(val) {
                if (val !== null && val) {
                    this.$refs.refHandle.dropDownVisible = false;

                    let index = this.departments.findIndex(a=>a.value == val[val.length - 1]);

                    if (index != -1){
                        let data = this.departments[index]

                        this.data.department_id = data.value + "";
                        this.data.department_name = data.label

                        this.$refs.ruleForm.fields.map(i => {
                            if (i.prop === "department_id") {
                                i.clearValidate();
                            }
                        });
                    }

                }
            },
            addClick:function () {
                this.data = {
                    project_roles_id: "2",
                    project_roles: "项目成员",
                    selectMembers:[],
                }
                this.editIndex = -1;
                this.dialogVisible = true;
            },
            handleClose:function () {
                this.dialogVisible = false;
            },
            documentConfirm:function () {
                if (!this.data.project_roles_id){
                    this.$message.error("请选择职责")
                    return
                }
                if (!this.data.selectMembers.length){
                    this.$message.error("请选择人员")
                    return
                }
                let bo = false;
                for (let i = 0; i < this.data.selectMembers.length; i++){
                    let data = this.data.selectMembers[i]
                    let index = this.members.findIndex(a=>a.member_id == data.id)
                    if (index != -1){
                        this.$message.error(data.name + "已存在")
                        bo = true
                        break
                    }
                }
                if (bo){
                    return;
                }

                for (let i = 0; i < this.data.selectMembers.length; i++){
                    let data = this.data.selectMembers[i]
                    let member = {
                        name:data.name,
                        member_id: data.id,
                        member_name: data.name,
                        department_id: data.department_id,
                        department_name: data.department_name,
                        project_roles_id: this.data.project_roles_id + "",
                        project_roles: this.data.project_roles,
                    }
                    this.members.push(member);
                }
                this.dialogVisible = false;
                // this.$refs.ruleForm.validate((valid) => {
                //     if (valid) {
                //         if (this.editIndex == -1){
                //             let index = this.members.findIndex(a=>a.member_id == this.data.member_id)
                //             if (index == -1){
                //                 this.members.push(this.data);
                //                 this.dialogVisible = false;
                //             }else{
                //                 this.$message.error("人员已存在")
                //             }
                //
                //         }else {
                //             this.$set(this.members,this.editIndex,this.data)
                //             this.$emit("refreshMember",this.data);
                //             this.dialogVisible = false;
                //         }
                //
                //     }
                // });
            },
            editClick:function (index) {
                this.data = {...this.members[index]}
                this.editIndex = index;

                if (this.data.department_id){
                    let d = {
                        department_id:this.data.department_id,
                        limit:1000,
                        skip:1,
                        user_status:1,
                    }
                    this.$api.GET_USER_LIST(d).then(res=>{
                        if (res.code == 200){
                            this.peoples = res.data.data;
                        }
                    })
                }


                this.dialogVisible = true;
            },
            deleteClick:function (index) {
                let data = this.members[index]
                this.$emit("deleteMember",{...data});
                this.members.splice(index,1)

                // this.memberData.splice(index,1)
            },
            changeClick:function(index){
                let data = this.members[index]
                if (data.project_roles_id == 1){
                    data.project_roles_id = "2"
                    data.project_roles = "组员"
                }else{
                    data.project_roles_id = "1"
                    data.project_roles = "组长"
                }
            },
            nameChange:function (id) {
                let index = this.peoples.findIndex(a=>a.id == id);

                if (index != -1){
                    let data = this.peoples[index]

                    this.data.member_id = data.id + "";
                    this.data.member_name = data.user_name
                }
            },
            departmentChange:function (val) {

                let index = this.departments.findIndex(a=>a.id == val);

                if (index != -1){
                    let data = this.departments[index]

                    this.data.department_id = data.id + "";
                    this.data.department_name = data.department_name

                    this.data.member_id = "";
                    this.data.member_name = ''

                    let d = {
                        department_id:data.id,
                        limit:1000,
                        skip:1,
                        user_status:1,
                    }
                    this.$api.GET_USER_LIST(d).then(res=>{
                        if (res.code == 200){
                            this.peoples = res.data.data;
                        }
                    })
                }
            },
            rolesChange:function (val) {

                let index = this.roles.findIndex(a=>a.value == val);

                if (index != -1){
                    let data = this.roles[index]

                    this.data.project_roles_id = data.value + "";
                    this.data.project_roles = data.label
                }
            },

        }
    }
</script>

<style scoped>

</style>
